<script setup>
import {Male,Female} from "@element-plus/icons-vue";
import {postJson} from "@/net";
import {useStore} from "@/stores";
import {reactive} from "vue";

const props = defineProps(["infoForm"])
const store = useStore()
const user = props.infoForm
</script>

<template>
  <div v-show="infoForm.id != null" style="width: 100%;height: 100%">
    <el-row style="height: 10%"/>
    <el-row justify="space-between" style="height: 80%">
      <el-col :span="5"/>
      <el-col :span="14">
        <el-row style="height: 25%;padding: 4%">
          <el-col :span="8">
            <el-avatar :size="100" :src="user.avatar" />
          </el-col>
          <el-col :span="14">
            <el-row style="height: 5%"/>
            <el-row align="top">
              <el-col>
                <el-text tag="b" size="large">{{user.username}}</el-text>
              </el-col>
              <el-col>
                <el-text>{{ user.email }}</el-text>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-divider style="margin: 0"/>
        <el-row style="height: 60%">
          <el-col :span="2">
            <div v-if="infoForm.sex == 0">
              <el-icon ><Male /></el-icon><el-text size="small">男</el-text>
            </div>
            <div v-else>
              <el-icon><Female /></el-icon><el-text size="small" style="margin-left: 1px">女</el-text>
            </div>
          </el-col>
          <el-divider direction="vertical" style="margin-top: 5px" />
          <el-col :span="6">
            <el-text>{{infoForm.email}}</el-text>
          </el-col>
          <el-divider direction="vertical" style="margin-top: 5px" />
          <el-col :span="6">
            <el-text>{{infoForm.phone}}</el-text>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="5"/>
    </el-row>
  </div>
</template>

<style scoped>

</style>